<%@ page isELIgnored="false" %>
<%@page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<% 
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
    <head>	
    	<base href="<%=basePath %>">
		<title>商品列表</title>
        <!-- ALL STYLESHEET -->
        <link href="views/front/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<link href="views/front/css/font-awesome.min.css" rel="stylesheet">
		<link href="views/front/css/style.css" rel="stylesheet">
		<link href="views/front/css/custom.css" rel="stylesheet">
    </head>   
	<body>
	
		<!-- 注册弹窗-->
        <iframe id="registerDIV" class="pushDiv" scrolling="no" src="views/front/register.jsp"></iframe>
        
        <!-- 登录弹窗-->
        <iframe id="loginDIV" class="pushDiv" scrolling="no" src="views/front/login.jsp"></iframe>
        
        <!-- 登录弹窗-->
        <iframe id="commonsDiv" class="pushDiv" scrolling="no" src="views/front/commons.jsp"></iframe>
		
		<!-- header -->
		<header class="header">
			<!-- header top -->
			<div class="header-top">
				<div class="container">
					<div class="row">
						<div class="col-sm-3">
							<ul class="list-inline">
								<li>
									<div class="dropdown">
										<a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img  src="views/front/images/chinese.jpg" alt="" /> 中国 <i class="fa fa-angle-down"></i></a>
										<ul class="dropdown-menu">
											<li><a href="javascript:void(0)">中国</a></li>
										</ul>
									</div>
								</li>
								<li>
									<div class="dropdown">
									</div>
								</li>
							</ul>
						</div>
						<div class="col-sm-4">
						</div>
						<c:choose>
							<c:when test="${userInfo eq null}">
								<div class="col-sm-5" id="user_head">
                                    <ul class="list-inline pull-right">Hi,尊敬的用户，您可以
                                        <li><a href="javascript:open_div('loginDIV')" ><i class="fa fa-user"></i> 登录</a></li>
                                        <li><a href="javascript:toShopCar()" ><i class="fa fa-heart-o"></i> 购物车 (${shopCarCount })</a></li>
                                        <li><a class="register" href="javascript:open_div('registerDIV')" >注册</a></li>
                                    </ul>	
                                </div>
							</c:when>
							<c:otherwise>
								<div class="col-sm-5" id="user_head">
                                    <ul class="list-inline pull-right">Hi,
                                        <li><a href="javascript:toUserInfo()" ><i class="fa fa-user"></i> ${userInfo.uname }</a></li>
                                        <li><a href="javascript:toShopCar()" ><i class="fa fa-heart-o"></i> 购物车 (${shopCarCount })</a></li>
                                        <li><a class="exit" href="javascript:exit()" >登出</a></li>
                                    </ul>	
                                </div>
							</c:otherwise>
						</c:choose>	
				</div>
			</div>
			
			<!-- logo and adds -->
			<div class="logo-add">
				<div class="container">
					<div class="row">
						<div class="col-sm-4">
							<div class="logo"><i class="fa fa-diamond"></i>MINISHOP觅你</div>
						</div>
						<div class="col-sm-8">
							<h3 class="add bb-year-end-ribbon hidden-xs"><img src="views/front/images/red-tablet.png" width="40px;" alt="" /> 
							<span>Hi!你想要的 <span>商品</span> 都在这里</span> <button class="btn btn-default" onClick="javascript:open_div('registerDIV')"> 新用户注册 </button></h3>
						</div>
					</div>
				</div>
			</div>
			
			<!-- header bottom -->
			<div class="header-bottom">
				<div class="row">
					<div class="col-sm-12">
						<nav class="navbar navbar-default">
							<div class="container">
								<!-- Brand and toggle get grouped for better mobile display -->
								<div class="navbar-header">
									<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-bottom" aria-expanded="false">
										<span class="sr-only">Toggle navigation</span>
										<span class="icon-bar"></span>
										<span class="icon-bar"></span>
										<span class="icon-bar"></span>
									</button>
								</div>

								<!-- Collect the nav links, forms, and other content for toggling -->
								<div class="collapse navbar-collapse" id="header-bottom">
									<ul class="nav navbar-nav">
										<li class="active"><a href="javascript:void(0)" onClick="javascript:location.href='index.jsp'" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">首页</a></span>
										<li><a href="javascript:void(0)" onClick="javascript:location.href='views/front/product.jsp'" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">购物</a><span class="label label-danger text-center hidden-xs">New <i class="fa fa-caret-right"></i></span></li>
										<li><a href="javascript:void(0)" onClick="javascript:location.href='views/front/about-us.jsp'">关于MINISHOP</a> </li>
										<li><a href="javascript:void(0)" onClick="javascript:location.href='views/front/contact-us.jsp'">联系我们</a></li>
									</ul>
								</div>
							</div>
						</nav>
					</div>	
				</div>	
			</div>	
		</header>
		
		<!-- desktop bar -->
		<section class="desktop-bar">
			<div class="container">
				<div class="row">
					<div class="col-sm-4">
					 <h3>购物 <i class="fa fa-bars"></i></h3>
					</div>
					<div class="col-sm-8">
						<ol class="breadcrumb hidden-xs pull-right">
							<li><a href="#">首页</a></li>
							<li class="active"><a href="#">购物</a></li>
						</ol>
					</div>
				</div>
			</div>
		</section>
		
		<!-- recommented products -->
		<section class="featured-product recommented-product">
			<div class="container">
				<div class="row">
					<div class="col-sm-3">
					</div>
					<div class="col-sm-9">
						<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
						</div>
						<!-- desktop -->
						<div class="featured-product desktop">
							<div class="row">
								<div class="col-sm-12" id="content">
									<!-- <div class="row">
										<div class="col-sm-12">
											<h1><span class="t-color-6">Desktops</span></h1>
											<div class="heading-border b-color-6"></div>
										</div>
									</div>  --><!-- section title -->
									<div class="row hidden-xs">
										<div class="col-sm-12">
											<nav class="navbar navbar-default desk-nav">
												<!-- Brand and toggle get grouped for better mobile display -->
												<div class="navbar-header">
													<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#desktop" aria-expanded="false">
														<span class="sr-only">Toggle navigation</span>
														<span class="icon-bar"></span>
														<span class="icon-bar"></span>
														<span class="icon-bar"></span>
													</button>
												</div>

												<!-- Collect the nav links, forms, and other content for toggling -->
												<div class="collapse navbar-collapse" id="desktop">
													<div class="navbar-form nav navbar-nav navbar-left">
														<div class="selection"> 排序
															<select class="form-control">
																<option>根据时间</option>
																<option>根据价格</option>
																<option>根据购买数</option>
															</select>
															<i class="fa fa-long-arrow-up"></i>
														</div>

														<div class="selection"> 展示条目
															<select class="form-control ">
																<option>10条每页</option>
																<option>20条每页</option>
																<option>30条每页</option>
																<option>40条每页</option>
																<option>50条每页</option>
															</select>
														</div>	
													</div>	

													<!-- <ul class="nav navbar-nav navbar-right">
														<li class="active"><a href="#"><i class="fa fa-th"></i> Grid</a></li>
														<li><a href="#"><i class="fa fa-th-list"></i> List</a></li>
													</ul> -->
												</div>
											</nav>
										</div>
									</div>	
								</div>
							</div>
						</div> <!-- desktop -->
						<!-- pagination -->
						<nav>
							<ul class="pagination">
								<li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
								<li><a href="#">1</a></li>
								<li class="active"><a href="#">2</a></li>
								<li><a href="#">3</a></li>
								<li><a href="#">4</a></li>
								<li><a href="#">5</a></li>
								<li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
							</li>
							</ul>
						</nav>
					</div><!--div 9 -->
				</div>
			</div>
		</section>
		
		
		<footer>
			<div class="footer-bottom">
				<div class="container">		
					<div class="row">	
						<div class="col-sm-12 text-center">
							<p>Copyright 2015 made by <a href="#">Bootultra.com</a> & Disign by Shaifuddin. All Rights Reserved.</p>
							<ul class="list-inline center-block">
								<li><a href="#"><img src="views/front/images/card-1.png"></a></li>
								<li><a href="#"><img src="views/front/images/card-2.png"></a></li>
								<li><a href="#"><img src="views/front/images/card-3.png"></a></li>
								<li><a href="#"><img src="views/front/images/card-4.png"></a></li>
								<li><a href="#"><img src="views/front/images/card-5.png"></a></li>
							</ul>
						</div>
					</div>
				</div>	
			</div>
		</footer>
			
        <!-- ALL JAVASCRIPT -->         
        <script src="views/front/js/jquery.js"></script>
        <script src="views/front/bootstrap/js/bootstrap.min.js"></script>
        <script src="views/front/js/custom.js"></script>
        <script type="text/javascript">
        	function buy(id){
        		location.href="front/commodity/buy/"+id+",";
        	}
        	
        	function look(id){
        		$.ajax({
	        		url:'front/assess/'+id,
	        		type:'GET',
	        		dataType:'JSON',
	        		success:function(data){
	        			if(data.code='0000'){
	        				open_div("commonsDiv");
	        				var temp='<tr><th style="width:200px;">买家</th><th style="width:200px;">评价</th><th style="width:200px;">时间</th></tr>';
	        				var commonsObj=data.obj;
	        				for(var i=0;i<commonsObj.length;i++){
	        					var obj=commonsObj[i];
	        					temp+='<tr><td id="maijia">'+obj.uname+'</td><td id="content">'+obj.content+'</td><td id="time">'+obj.createdate+'</td></tr>';
	        				}
	        				$("#commonsDiv").contents().find("#table").html(temp);
	        			}else{
	        				alert("获取商品评价失败");
	        			}
	        		}
        		});
        	}
        
        	$(function(){
        		$.ajax({
	        		url:'front/commodity/select/default',
	        		type:'POST',
	        		dataType:'JSON',
	        		success:function(data){
	        			var tempStr='<div class="row hidden-xs"> <div class="col-sm-12">  <nav class="navbar navbar-default desk-nav">   <div class="navbar-header">    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#desktop" aria-expanded="false">     <span class="sr-only">Toggle navigation</span>     <span class="icon-bar"></span>     <span class="icon-bar"></span>     <span class="icon-bar"></span>    </button>   </div>   <div class="collapse navbar-collapse" id="desktop">    <div class="navbar-form nav navbar-nav navbar-left">     <div class="selection"> 排序      <select class="form-control">       <option>根据时间</option>       <option>根据价格</option>       <option>根据购买数</option>      </select>      <i class="fa fa-long-arrow-up"></i>     </div>     <div class="selection"> 展示条目      <select class="form-control ">       <option>10条每页</option>       <option>20条每页</option>       <option>30条每页</option>       <option>40条每页</option>       <option>50条每页</option>      </select>     </div>     </div>    </div>  </nav> </div></div>';
	        			var count=0;
	        			if(data.code=="0000"){
	        				for(var i=0;i<data.obj.length;i++){
	        					var item=data.obj[i]
	        					if(i%2==0&&count==0){
	        						tempStr+='<div class="row">';
	        					}
	        					//处理单个的商品
	        					tempStr+='<div class="col-sm-4"> <div class="thumbnail"> <span class="service-link text-center"> <img class="img-responsive" style="width:235px;height:188px;" src="';
	        					//处理图片
	        					if(item.cimg){}
	        					tempStr+=''+item.cimg;
	        					tempStr+='" alt=""> <div class="list-inline">  <a href="javascript:look('+item.commid+')"><i class="fa fa-eye"></i></a></div> </span> <div class="caption"> <div class="category"> '+item.cname+'  <div class="pull-right">   <i class="fa fa-star"></i>   <i class="fa fa-star"></i>   <i class="fa fa-star"></i>   <i class="fa fa-star"></i>   <i class="fa fa-star-o"></i>  </div> </div> <h3>'+item.cdescribe+'</h3> <strong>￥'+item.price+'</strong> <div><a href="javascript:buy('+item.commid+')" class="btn btn-default" role="button">购买</a><a class="pull-right" href="javascript:addShopCar('+item.commid+')"><i class="fa fa-heart-o"></i> 添加购物车</a></div> </div> </div> </div>';
	        					if(i%2==0&&count==1){
	        						tempStr+='</div>';
	        						count=0;
	        					}
	        					count++;
	        				}
	        				$("#content").html(tempStr);
	        			}else{
	        				alert("加载失败");
	        			}
	        		}
	        	});
        	});
        </script>
    </body>
</html>